h1...h6

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

p

Some regular text here to be read and some more regular text here to be read and some more regular text here to be read and some more regular text here to be read

p class="lead"

Lead Text

p small

This line of text is meant to be treated as fine print.

strong

rendered as bold text

em

rendered as italicized text

p class="text-left/text-center/text-right"

Left aligned text.

Center aligned text.

Right aligned text.

p class="muted/text-warning/text-error/text-info/text-success"

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

abbr

attr

abbr class="initialism"

HTML

address

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

blockquote small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title

blockquote class="pull-right"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title

div class="clearfix"

after pull-right we need a clearfix div

ul

• Eins
• Zwei

ol

1. Eins
2. Zwei

ul class="unstyled"

• Eins
• Zwei

ul class="inline"

• Eins
• Zwei

dl

Term

Definition

dl class="dl-horizontal"

Term

Definition which is longer

Term which is longer

Definition

code

For example, <section> should be wrapped as inline.

pre

<p>Sample text here...</p>

table-striped

#	First Name	Last Name	Username
1	Fred	Tester	@tester
1	Fred	Tester	@tester
1	Fred	Tester	@tester

table-bordered

#	First Name	Last Name	Username
1	Fred	Tester	@tester
1	Fred	Tester	@tester
1	Fred	Tester	@tester

table-hover

#	First Name	Last Name	Username
1	Fred	Tester	@tester
1	Fred	Tester	@tester
1	Fred	Tester	@tester

table-condensed

#	First Name	Last Name	Username
1	Fred	Tester	@tester
1	Fred	Tester	@tester
1	Fred	Tester	@tester

table tr classes

#	First Name	Last Name	Username
1	success	Tester	@tester
1	error	Tester	@tester
1	warning	Tester	@tester
1	info	Tester	@tester

form

Legend

Label name Example block-level help text here. Label Textarea Check me out checkbox inline 1 2 3 radio Option one is this and that—be sure to include why it's great Option two can be something else and selecting it will deselect option one select 1 2 3 4 5 select multiple="multiple" 1 2 3 4 5 Submit

form-search

Search

form-inline

Remember me Sign in

form-horizontal (per line: div class="control-group")

label

div class="controls"

Email

Password

Textarea

radio

Option one is this and that—be sure to include why it's great Option two can be something else and selecting it will deselect option one

checkbox inline

1 2 3

select

1 2 3 4 5

select multiple="multiple"

1 2 3 4 5

Remember me Sign in

input-prepend

input-append

input-append button

Button dropdowns append

Button dropdowns prepend

Segmented dropdown groups

Action

• Action
• Another action
• Separated link

Action

• Action
• Another action
• Separated link

Search Form

Search

predefined classes

Grid

multiple grid inputs per line

uneditable-input

Form Actions

span class="help-inline"

span class="help-block"

focused

required

disabled

class="control-group warning/error/info/success"

Button	class=""	Description
Default	btn	Standard gray button with gradient
Primary	btn btn-primary	Provides extra visual weight and identifies the primary action in a set of buttons
Info	btn btn-info	Used as an alternative to the default styles
Success	btn btn-success	Indicates a successful or positive action
Warning	btn btn-warning	Indicates caution should be taken with this action
Danger	btn btn-danger	Indicates a dangerous or potentially negative action
Inverse	btn btn-inverse	Alternate dark gray button, not tied to a semantic action or use
Link	btn btn-link	Deemphasize a button by making it look like a link while maintaining button behavior

.btn-large .btn-small .btn-mini

Large button Large button

Default button Default button

Small button Small button

Mini button Mini button

.btn-block

.disabled

Primary button Button

.icon-search/forward/...

.icon-white

.btn-toolbar btn

Dropdown in a button group

.btn btn-large/small/mini

Star Star Star

ul.nav-list

Form fields